<template>
	<view>
		<z-nav-bar title="提问"></z-nav-bar>
		<view class="coach">
			<view>
				<text class="uni-red">*</text>
				教练
			</view>
			<view class="coach_info flex_fsc uni-mt-16">
				<image :src="setting.oss_pub_domain + coachInfo.avatar"></image>
				<view>{{ coachInfo.nickName }}</view>
				<!-- <view class="change">
					<text>修改</text>
				</view> -->
			</view>
		</view>
		<view class="appear">
			<view>
				<text class="uni-red">*</text>
				问题现象
			</view>
			<text class="state">(请简要选择问题现象)</text>
			<view v-if="postData.descriptionTagName" class="flex_fsc uni-mt-16">
				<view class="desc-tag">{{ postData.descriptionTagName }}</view>
				<view class="change" @click="selTag">修改</view>
			</view>
			<view v-else class="select flex_cc" @click="selTag">
				<image :src="setting.sImgUrl + '/train/icon_Add2.png'" mode=""></image>
				<view class="sg">选择</view>
			</view>
		</view>
		<view class="content">
			<view>
				<text class="uni-red">*</text>
				问题描述
			</view>
			<textarea v-model="postData.description" placeholder="问题描述"></textarea>
		</view>
		<view class="video">
			添加视频或图片
			<z-preview-media :srcStr="postData.material" @change="materialChange" addButton delIcon></z-preview-media>
		</view>
		<bottom-box :buts="buts" @change="submit"></bottom-box>
	</view>
</template>

<script>
import { createProblem } from '@/api/student';
export default {
	data() {
		return {
			coachInfo: {},
			postData: {
				descriptionTag: '',
				descriptionTagName: '',
				description: '',
				material: ''
			},
			buts: [
				{
					label: '确定',
					bgColor: 'uni-color-main-bg'
				}
			],
			eventChannel: ''
		};
	},
	onLoad() {
		this.eventChannel = this.getOpenerEventChannel();
		this.coachInfo = uni.getStorageSync('coach-detail');
		this.postData.instuctorId = this.coachInfo.userId;
		console.log(this.coachInfo);
	},
	methods: {
		selTag() {
			uni.navigateTo({
				url: `/pages/question/add-item/add-item`,
				events: {
					getTag: (data) => {
						console.log(data);
						this.postData.descriptionTag = data.code;
						this.postData.descriptionTagName = data.obj[0].map((item) => item.dictValue).join('-->');
						if (!this.postData.description) this.postData.description = this.postData.descriptionTagName
					}
				}
			});
		},
		materialChange(data) {
			this.postData.material = data;
		},
		submit() {
			if (!this.postData.descriptionTag) return this.tools.alert('请选择问题现象');
			if (!this.postData.description) return this.tools.alert('请输入问题描述');
			// if (!this.postData.material) return this.tools.alert('请上问题图片');
			createProblem(this.postData).then((res) => {
				this.tools.alert('问题创建完成');
				this.eventChannel.emit('editDone', res);
				uni.navigateBack();
			});
		}
	}
};
</script>

<style>
.top {
	height: 88rpx;
	position: fixed;
	top: 0;
	left: 0;
	width: 702rpx;
	display: flex;
	padding: 0 24rpx;
	padding-top: var(--status-bar-height);
	align-items: center;
	font-size: 32rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #333336;
	background-color: #fff;
	z-index: 999;
	text-align: center;
}

.top .img {
	height: 48rpx;
}

.top image {
	width: 48rpx;
	height: 48rpx;
}

.top text {
	padding-left: 280rpx;
}

.coach {
	font-weight: 400;
	margin-left: 50rpx;
}
.coach .coach_info image {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	margin-right: 16rpx;
}

.desc-tag {
	padding: 12rpx 32rpx;
	border-radius: 12rpx;
	background: #f5f5f5;
	font-size: 24rpx;
	margin-right: 16rpx;
}
.change {
	border: 1px solid #008965;
	border-radius: 20rpx;
	width: 110rpx;
	height: 40rpx;
	color: #008965;
	text-align: center;
	line-height: 40rpx;
}

.coach .coach_info .change text {
	color: #008965;
}

.appear {
	margin-left: 50rpx;
	margin: 32rpx 50rpx 0;
}

.appear .state {
	margin-left: 10rpx;
	color: #c4c7cc;
	font-size: 20rpx;
}

.appear .select {
	margin-top: 40rpx;
	width: 100%;
	height: 80rpx;
	border: 2px dashed #008965;
	border-radius: 60rpx;
	/* border: 2px dashed transparent;    
		background: linear-gradient(white,white) padding-box, repeating-linear-gradient(-25deg,#008965 0, #008965 .35em,white 0,white .80em); */
}

.appear .select image {
	height: 40rpx;
	width: 40rpx;
}

.appear .select .sg {
	color: #008965;
}

.content {
	margin: 32rpx 50rpx 0;
}

.content textarea {
	margin-top: 25rpx;
	width: 100%;
	height: 300rpx;
	background-color: #f8f9fa;
	border-radius: 20rpx;
	box-sizing: border-box;
	padding: 16rpx 32rpx;
}

.video {
	margin-top: 25rpx;
	margin-left: 50rpx;
	margin-right: 50rpx;
	width: 100%;
}

.video .active {
	display: flex;
	flex-wrap: wrap;
}

.video .active image {
	padding: 10rpx 10rpx 10rpx;
	width: 200rpx;
	height: 200rpx;
}
</style>
